<template>
  <a-config-provider
    :locale="locale"
    :theme="{
      algorithm:
        systemTheme === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm,
      token: {
        colorPrimary: systemConfig.primaryColor,
        colorBgBase: systemTheme === 'light' ? '#fff' : 'rgb(16,16,16)',
        colorBgContainer: systemTheme === 'light' ? '#fff' : 'rgb(30,30,30)',
        borderRadius: systemConfig.borderRadius,
      },
    }"
  >
    <router-view />
  </a-config-provider>
</template>

<script setup>
import { useSystemConfig } from "./store/systemConfig.js";
import { theme } from "ant-design-vue";
import { computed, watchEffect, ref } from "vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

const locale = zhCN;

const systemConfig = useSystemConfig();

// 主题 light dark fixed
const systemTheme = computed(() => {
  if (systemConfig.theme === "dark") {
    return "dark";
  } else {
    return "light";
  }
});

//动态修改进度条主题颜色
watchEffect(() => {
  document.documentElement.style.setProperty(
    "--color-primary",
    systemConfig.primaryColor
  );
});
</script>

<style>
:root {
  --color-primary: #fff;
}
#app {
  position: relative;
  z-index: 0;
}

#nprogress .bar {
  background-color: var(--color-primary) !important; /* 修改为你想要的颜色 */
}
</style>
